<template>
    <div>
        <div class="fundationProductDetail">
            <x-header :left-options="{backText: ''}" :right-options="{showMore: true}" @on-click-more="showMenus = true">产品详情</x-header>
            <div class="content">
                <div class="tab">
                    <!-- 切换按钮 -->
                    <div class="buy flex"><div class="tab_child" :class="{'selected':tabIndex == 1}" @click="changeTab(1)">买入规则</div></div>
                    <div class="sale flex"><div class="tab_child" :class="{'selected':tabIndex == 2}" @click="changeTab(2)">卖出规则</div></div>
                </div>
                <!-- 切换模板 -->
                <div class="tab_detail">
                    <div class="buy_con" v-show="tabIndex == 1">
                        <div class="flow">
                            <div class="flow_title">买入流程</div>
                            <div class="flow_img">
                                <div class="line_up line_flex">
                                    <span>买入提交</span>
                                    <span>确认份额，开始计算收益</span>
                                    <span>查看收益</span>
                                </div>
                                <img src="../../assets/img/Fundation/img_flow.png" alt="">
                                <div class="line_down line_flex">
                                    <span class="one_step">T日</span>
                                    <span class="two_step">T+1</span>
                                    <span>T+2日15:00后</span>
                                </div>
                            </div>
                            <ul class="flow_txt">
                                <li class="first_child"><span>.</span>·T日：交易日，以每天15:00为界限，15:00(不含)之前为T日，15:00(含)及之后为T+1日。周末和法定节假日属于非交易日，以支付成功时间为准。</li>
                                <li><span>.</span>基金交易时间为周一至周五的9:30-15:·T日申请，将按T日基金净值确认份额。份额确认当日，基金净值更新后即可查看首笔盈亏。确认后下一T日可出。</li>
                            </ul>
                        </div>
                        <div class="rate">
                            买入费率 (前端申购)
                        </div>
                        <div class="money_table">
                            <!-- 表头 -->
                            <div class="table_head">
                                <div class="table_head_money">金额</div>
                                <div class="table_head_rate">优惠费率</div>
                            </div>
                            <!-- body -->
                            <ul class="table_body">
                                <li>
                                    <span class="buyAmount">0&lt;买入金额&lt;50万</span>
                                    <div class="percent">
                                        <span class="pastPer">1.50%</span>
                                        <span class="curPer">1.50%</span>
                                    </div>
                                </li>
                                <li>
                                    <span class="buyAmount">50万&lt;买入金额&lt;100万</span>
                                    <div class="percent">
                                        <s class="pastPer">1.40%</s>
                                        <span class="curPer">1.30%</span>
                                    </div>
                                </li>
                                <li>
                                    <span class="buyAmount">100万&lt;买入金额&lt;200万</span>
                                    <div class="percent">
                                        <s class="pastPer">1.70%</s>
                                        <span class="curPer">1.90%</span>
                                    </div>
                                </li>
                                <li>
                                    <span class="buyAmount">200万&lt;买入金额&lt;500万</span>
                                    <div class="percent">
                                        <s class="pastPer">1.70%</s>
                                        <span class="curPer">1.50%</span>
                                    </div>
                                </li>
                                <li>
                                    <span class="buyAmount">500万&lt;买入金额&lt;50万</span>
                                    <div class="percent">
                                        <s class="pastPer">1.30%</s>
                                        <span class="curPer">1.70%</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="sale_con" v-show="tabIndex == 2">
                        <div class="flow">
                            <div class="flow_title">卖出流程</div>
                            <div class="flow_img">
                                <div class="line_up line_flex">
                                    <span>买出提交</span>
                                    <span>确认份额</span>
                                    <span>资金到账</span>
                                </div>
                                <img src="../../assets/img/Fundation/img_flow.png" alt="">
                                <div class="line_down line_flex pad_btm">
                                    <span class="one_step2">今日15点前</span>
                                    <span class="two_step2">05-03(星期四)</span>
                                    <span>05-03(星期四)</span>
                                </div>
                            </div>
                        </div>
                        <div class="rate">
                            卖出费率
                        </div>
                        <div class="money_table">
                            <!-- 表头 -->
                            <div class="table_head">
                                <div class="table_head_money">持有期限</div>
                                <div class="table_head_rate">费率</div>
                            </div>
                            <!-- body -->
                            <ul class="table_body">
                                <li>
                                    <span class="buyAmount">0天 &le; 持有天数</span>
                                    <span class="pastPer">0.00%</span>
                                </li>
                                <li class="other_li">
                                    <div class="calc_title">基金卖出时一般按照先进先出规则。基金卖出手续费与持有期有关，实际费用收取请以基金公司确认为准。</div>
                                    <div class="calc_methods">
                                        <p>赎回计算公式：</p>
                                        <p>赎回总额=赎回数量xT日基金份额净值</p>
                                        <p>赎回费用=赎回总额x赎回费率</p>
                                        <p>赎回金额=赎回总额-赎回费用</p>
                                    </div>
                                </li>
                            </ul>
                            <p class="tips">基金费率等信息以基金公司最新披露的基金信息为准。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tabIndex: 1 // 控制tab切换不同的模板，默认是买入规则下标：1
    }
  },
  methods: {
    changeTab (index) {
      this.tabIndex = index
      if (index === 1) { // 买入
        // this.getbillDetail();
      } else { // 卖出
        // this.getTrajectory();
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .fundationProductDetail {
        .flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content {
            width: 100%;
            .tab {
                display: flex;
                width: 100%;
                height: .80rem;
                color: #333;
                background: #fff;
                border-top: 1px solid #EAEAEA;
                .buy {
                    width: 50%;
                    // background: red;
                }
                .sale {
                    width: 50%;
                }
                .selected {
                    color: #EC1B30;
                    border-bottom: 4px solid #EC1B30;
                }
                .tab_child {
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
            .tab_detail {
                margin-top: .2rem;
                .flow {
                    background: #fff;
                    .flow_title {
                        display: flex;
                        align-items: center;
                        height: .8rem;
                        border-bottom: 1px solid #EAEAEA;
                        padding-left: .3rem;
                        font-size: .3rem;
                        font-weight: bold;
                    }
                    .flow_img {
                        padding: .40rem .30rem 0rem;
                        .line_up {
                            font-size: .20rem;
                            color: #333;
                        }
                        img {
                            width: 100%;
                        }
                        .line_down {
                            font-size: .18rem;
                            color: #999;
                            .one_step {
                                padding-left: .40rem;
                            }
                            .two_step {
                                padding-left: 1rem;
                            }
                        }
                        .pad_btm {
                            padding-bottom: .40rem;
                        }
                        .line_flex {
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                    .flow_txt {
                        padding: .30rem .30rem;
                        height: 4.16rem;
                        width: 100%;
                        .first_child {
                            margin-top: 0rem;
                        }
                        li {
                            padding-left: .15rem;
                            position: relative;
                            margin-top: .30rem;
                            font-size: .28rem;
                            color: #666;
                            span {
                                display: inline-block;
                                position: absolute;
                                left: 0;
                                top: -0.08rem;
                                font-weight: 800;
                            }
                            li:nth-child(0) {
                                margin-top: 0rem;
                            }
                        }
                    }
                }
                .rate {
                    padding-left: .30rem;
                    margin-top: .20rem;
                    height: .88rem;
                    display: flex;
                    align-items: center;
                    font-size: .32rem;
                    color: #CCCCCC;
                    background: #fff;
                }
                .money_table {
                    .table_head {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: .60rem;
                        padding: 0rem .30rem;
                        font-size: .22rem;
                        .table_head_money {
                            color: #333;
                        }
                        .table_head_rate {
                            color: #999;
                        }
                    }
                    .table_body {
                        padding-left: .30rem;
                        background: #fff;
                        li {
                            display: flex;
                            justify-content: space-between;
                            padding-right: .30rem;
                            height: .88rem;
                            line-height: .88rem;
                            font-size: .28rem;
                            border-bottom: 1px solid #EAEAEA;
                            .buyAmount {
                                color: #333;
                            }
                            .percent {
                                width: 2.56rem;
                                .curPer {
                                    margin-left: .38rem;
                                    color: #EC1B30;
                                }
                            }
                            .pastPer {
                                color: #999;
                            }
                            &:last-child {
                                border: 0px solid #EAEAEA;
                            }
                        }
                        .other_li {
                            display: block;
                            padding: .30rem .20rem .40rem 0rem;
                            height: auto;
                            line-height: 1.5;
                            color: #333;
                            box-sizing: border-box;
                            .calc_methods {
                                margin-top: .40rem;
                            }
                        }
                    }
                    .tips {
                        margin-top: .30rem;
                        width: 100%;
                        text-align: center;
                        font-size: .24rem;
                        color: #999;
                    }
                }
            }
        }
    }
</style>
<style lang="less">
    // $baseFontSize: 100;
    // @function pxToRem($px) {
    // @return $px / $baseFontSize * 1rem;
    // }
    div.vux-header {
        background-color: #fff;
        color: #333;
    }
    div.vux-header .vux-header-left a {
        color: #333;
    }
    div.vux-header .vux-header-left .left-arrow:before {
        border: 1px solid #333;
        border-width: 1px 0 0 1px;
    }
    div.vux-header .vux-header-right a {
        color: #333;
    }
    div.vux-header .vux-header-title {
        font-size: 0.34rem;
        color: #333;
    }
    div.vux-header .vux-header-left .left-arrow:before {
        width: 0.2rem;
        height: 0.2rem;
    }
</style>
